<template>
    <div class="container-fluid">
        echarts 图标示例
        <a href="javascript:void(0);" @click="test">测试</a>
        <el-row>
            <el-col :span="12">
                <div style="width: 100%;padding: 10px;height: 450px;" id="china"></div>
            </el-col>
            <el-col :span="12">
                <div style="width: 100%;padding: 10px;height: 450px;" id="yunnan"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'

let url = 'https://geo.datav.aliyun.com/areas_v2/bound/'
export default {
    name: 'FlsActivityList',
    data () {
        return {
            map: null,
            upperLevelMap: [],
            chart: null,
            alladcode: []
        }
    },
    created () {
    },
    mounted () {
        let chart = this.$echarts.init(document.getElementById('china'))
        this.chart = chart
        this.getGeoJson('all.json').then(allRes => {
            this.getGeoJson('100000_full.json').then(fullRes => {
                this.alladcode = fullRes.data
                let data = []
                for (let i = 0; i < fullRes.data.features.length; i++) {
                    let item = fullRes.data.features[i]
                    data.push({name: item.properties.name, value: this.getRandomNumber()})
                }
                this.initChart(fullRes.data, '全国', chart, allRes.data, data)
            })
        })
    },
    methods: {
        test () {
            //测试30次请求失败
            for (let i = 0; i < 30; i++) {
                this.$request.get("http://localhost:9090/fls/demo/test-sentinel/1").then(res=>{
                    console.log(res);
                    console.log(i);
                })
            }
        },
        initChart (geoJson, name, chart, alladcode, data) {
            this.$echarts.registerMap(name, geoJson)
            let option = {
                title: {
                    text: name,
                    subtext: '地图下钻',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    show: false,
                    x: 'left',
                    y: 'bottom',
                    splitList: [
                        {start: 500, end: 600}, {start: 400, end: 500},
                        {start: 300, end: 400}, {start: 200, end: 300},
                        {start: 100, end: 200}, {start: 0, end: 100},
                    ],
                    color: ['#cdb585', '#b89926', '#e0b30d', '#ec5706', '#33CC00', '#00CC00']
                },
                series: [
                    {
                        name: '随机数据',
                        type: 'map',
                        map: name,
                        itemStyle: {
                            areaColor: '#184aff'
                        },
                        data: data
                    }
                ]
            }
            chart.setOption(option)
            chart.off('click')
            chart.on('click', params => {
                let clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode
                this.getGeoJson(clickRegionCode + '_full.json').then(regionRes => {
                    let regionGeoJson = regionRes.data
                    let data = []
                    for (let i = 0; i < regionRes.data.features.length; i++) {
                        let item = regionRes.data.features[i]
                        data.push({name: item.properties.name, value: this.getRandomNumber()})
                    }
                    this.initChart(regionGeoJson, params.name, chart, alladcode, data)
                }).catch(error => {
                    this.getGeoJson('100000_full.json').then(chinaGeoJson => {
                        let data = []
                        for (let i = 0; i < chinaGeoJson.data.features.length; i++) {
                            let item = chinaGeoJson.data.features[i]
                            data.push({name: item.properties.name, value: this.getRandomNumber()})
                        }
                        this.initChart(chinaGeoJson.data, params.name, chart, alladcode, data)
                    })
                })
            })
        },
        getGeoJson (jsonName) {
            return axios.get(url + jsonName)
        },
        getRandomNumber () {
            return Math.random() * 500
        }
    },
    watch: {
        upperLevelMap (obj) {
            console.log(obj)
        }
    }
}
</script>

<style scoped>

</style>
